<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>query.jsp</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<jsp:include page="../common.jsp"/>
	<!-- 日期控件start -->
	<script type="text/javascript" src="<%=basePath%>libs/js/form/datePicker/WdatePicker.js"></script>
	<!-- 日期控件end -->
	<!-- 图表控件start -->
	<script type="text/javascript" src="libs/js/highcharts/highcharts.js"></script>
	<!-- 图表控件end -->
  </head>
  <body>
    <div class="box2" panelTitle="统计" id="searchPanel">
		<table>
			<tr>
				<td>开始时间:</td>
				<td>
					<input type="text" name="begin" readonly="readonly" id="beginTime" class="dateIcon">
				</td>
				<td>结束时间:</td>
				<td>
					<input type="text" name="end" readonly="readonly" id="endTime" class="dateIcon">
				</td>
				<td><button><span class="icon_find">统计</span></button>
				<input type="button" class="button" value="返回" onclick="location.href='sys/log/list'"></td>
			</tr>
		</table>
	</div>
    <div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
    <script>
		$(function () {
			$("#beginTime").click(function(){
				WdatePicker({
					maxDate:"#F{$dp.$D('endTime')||'${now}'}"
				});
			});
			$("#endTime").click(function(){
				WdatePicker({
					maxDate:"%y-%M-%d",minDate:"#F{$dp.$D('beginTime')}"
				});
			});
			var options={
		            chart: {
		            	renderTo:'container', type: 'column', margin: [ 50, 50, 100, 80]
		            },
		            title: {
		            	text: '网站访问量统计'
		            },
		            xAxis: {
		            	labels: {
		            		rotation: 0, align: 'center', style: {
		            			fontSize: '13px', fontFamily: 'Verdana, sans-serif'
		            		}
		            	}, title: {
		            		text: '日期'
		            	}
		            },
		            yAxis: {
		            	min: 0, title: {
		            		text: '次数'
		            	}
		            },
		            legend: {
		            	enabled: false
		            },
		            tooltip: {
		            	pointFormat: '{point.y} 次'
		            },
		            series: [{
		            	name: 'Population', dataLabels: {
		            		enabled: true, rotation: 0, color: '#FF0000', align: 'center', x: 4, y: 10, style: {
		            			fontSize: '13px', textShadow: '0 0 3px white'
		            		}
		            	}
		            }]
		        };
	         $("button").click(function(){
	        	 var begin=$("input[name=begin]").val();
	        	 var end=$("input[name=end]").val();
	        	 var categories=[];
	        	 var datas=[];
	        	 $.post('sys/log/doQuery',{begin:begin, end:end},function(data){
	        		 $(data).each(function(i,e){
	        			 categories[i]=e[0];
	        			 datas[i]=e[1];
	        		 });
	         		options.xAxis.categories = categories;
	 				options.series[0].data = datas;
	 				chart = new Highcharts.Chart(options);
	          	});
	         });
	    });
	</script>
  </body>
</html>